<template>
    <div style="">
        <Header :left="true" leftText="返回" title="消息处理"> </Header>
        <div class="textScroll">
            <van-row style="margin-top: 10px">
                <van-col>
                    <van-image width="40" height="30" style="margin-left: -10px" src="assets/block.png" />
                </van-col>
                <van-col class="message" style="margin-top: 5px">消息详情</van-col>
            </van-row>
            <div class="divMessage">
                <van-form :style="autoHeight">
                    <van-row style="margin-left: 15px; margin-top: 10px">
                        <van-col span="8"><b>发生时间:</b></van-col>
                        <van-col span="15">【{{ item.EventDatetime }}】</van-col>
                    </van-row>
                    <van-row style="margin-left: 15px; margin-top: 10px">
                        <van-col span="8"><b>事件描述:</b></van-col>
                        <van-col span="15">{{ item.EventDescription }}</van-col>
                    </van-row>
                    <van-row style="margin-left: 15px; margin-top: 10px">
                        <van-col span="8"><b>事件类型:</b></van-col>
                        <van-col span="15">【{{ EventTypeID }}】</van-col>
                    </van-row>
                    <van-row style="margin-left: 15px; margin-top: 10px">
                        <van-col span="8"><b>消息类型:</b></van-col>
                        <van-col span="15">【{{ item.MsgContentTypeID }}】</van-col>
                    </van-row>
                    <van-row style="margin-left: 15px; margin-top: 10px;margin-bottom: 15px;">
                        <van-col span="8"><b>消息内容:</b></van-col>
                        <van-col span="15">{{ item.MessageContent }}</van-col>
                    </van-row>
                </van-form>
            </div>

            <NoticeBar color="#1989fa" background="#ecf9ff" style="margin-top: 5px; font-size: 15px; font-weight: bold"
                left-icon="description">处理消息</NoticeBar>
            <van-field v-show="isallow" required readonly class="formstyle" name="picker" :value="valuepDealTypeName"
                label="处理方式" placeholder="选择处理方式" @click="showPickerDealType = true" />
            <van-popup v-model="showPickerDealType" position="bottom">
                <van-picker show-toolbar :columns="columnsDealType" @confirm="onConfirmDealType"
                    @cancel="showPickerDealType = false">
                    <template #option="option">
                        <div style="display: flex; flex-direction: column; align-items: center">
                            <div>{{ option.DealTypeName }}</div>
                        </div>
                    </template>
                </van-picker>
            </van-popup>
            <van-field required readonly class="formstyle" label="处理时间" :value="nowDate" />
            <van-field class="formstyle" v-model="form.QCLeaderMemo" required name="处理结果备注" label="处理结果备注"
                placeholder="输入处理结果备注" rows="2" autosize type="textarea" maxlength="100" show-word-limit />
            <div style="margin: 16px">
                <van-button color="#138087" round block type="info" native-type="submit" @click="submitsure">保存</van-button>
            </div>
        </div>
    </div>
</template>
  
<script>
import {
    Col,
    Row,
    Form,
    Cell,
    Icon,
    Field,
    NumberKeyboard,
    Image as VanImage,
    Picker,
    popup,
    SubmitBar,
    Button,
    Loading,
    Overlay,
    Dialog,
    Toast,
    NoticeBar,
    Tag,
    DatetimePicker,
    ImagePreview,
    CellGroup,
    Uploader,
    Cascader,
    Calendar,
    RadioGroup,
    Radio,
    Divider,
    Stepper,
    AddressList,
    Checkbox,
    CheckboxGroup,
} from "vant";

import "vue-easytable/libs/themes-base/index.css";
import { VTable } from "vue-easytable";
import { _httpClient } from "@/libs/apisie";
import { getToken, getBaseApiFrefix } from "@/libs/auth";
import Header from "@/components/header.vue";
import { storage } from "@/libs/utils";

Vue.use(Form);
Vue.use(Field);
Vue.use(Overlay);
Vue.use(Loading);
Vue.use(Picker);
Vue.use(popup);
Vue.use(SubmitBar);
Vue.use(VanImage);
Vue.use(DatetimePicker);
Vue.use(Cascader);
Vue.use(Calendar);
Vue.use(Cell);
Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(Divider);
Vue.use(Stepper);
Vue.use(Button);
Vue.use(AddressList);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Col);
Vue.use(Row);

export default {
    name: "pushMessageDoTwo",
    components: {
        Form,
        Row,
        Col,
        Button,
        Header,
        Form,
        Cell,
        Icon,
        Field,
        NumberKeyboard,
        Dialog,
        Toast,
        NoticeBar,
        Row,
        Tag,
        popup,
        DatetimePicker,
        ImagePreview,
        CellGroup,
        Uploader,
        Col,
        Calendar,
        Cascader,
        Picker,
        RadioGroup,
        Radio,
        Divider,
        Stepper,
        VTable,
        AddressList,
        Checkbox,
        CheckboxGroup,
    },
    data() {
        return {
            EventTypeID: "",
            dealtypelist: [],
            isallow: true,
            minDate: new Date(2022, 12, 1),
            nowDate: null,
            form: {
                QCLeaderAdviceDealType: "",
                QCLeaderMemo: "",
                QCLeaderAgree: "",
                EmployeeID: "",
            },
            user: [],
            QCLeaderAgreeValue: "",
            EmployeeName: "",
            time: "",
            FactoryID: "",
            valuepShiftName: "",
            CheckTypeName: "",
            QProblemName: "",
            valueteamid: "",
            BeginTime: "",
            WorkPlanDatetimeFrom: "",
            columnsteamId: [],
            showPickerteamid: false,
            showPickerpShiftID: false,
            showPickerDealType: false,
            valueemployid: "",
            columnsshift: [],
            columnsType: [],
            columnsDealType: [],
            columnsEmployee: [],
            columnsQProblem: [],
            showPickerEmployee: false,
            showPickerQProblem: false,
            item: {},
            valuepDealTypeName: "",
            Id: "",
            Type: ""
        };
    },
    destroyed() {
        clearInterval(this.nowtimer);
        this.nowDate = null;
    },
    created: function () {
        this.user = JSON.parse(storage.get("user"));
        this.user.userId = this.user.userName;
        this.Id = api.pageParam.Id;
        this.EventTypeID = api.pageParam.EventTypeID;
        this.Type = api.pageParam.Type;
        //获取员工列表
        this.getTime();
        this.getItems();
        this.getDealType();
    },
    mounted() { },
    methods: {
        getTime() {
            var date = new Date();
            date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
            this.nowDate = date.toJSON().substr(0, 19).replace("T", " ");
        },
        onConfirmDealType(value, index) {
            this.valuepDealTypeName = this.columnsDealType[index].DealTypeName;
            this.form.QCLeaderAdviceDealType = this.columnsDealType[index].DealTypeID;
            //alert(this.form.QCLeaderAdviceDealType);
            this.showPickerDealType = false;
            this.changeAgreeValue();
        },
        showTeamIDName(teamID) {
            var teamName = teamID;
            this.columnsteamId.forEach((item) => {
                if (item.teamID === teamID) {
                    teamName = item.teamName;
                }
            });
            return teamName;
        },
        showShiftIDName(pShiftID) {
            var pShiftName;
            this.columnsshift.forEach((item) => {
                if (item.pShiftID === pShiftID) {
                    pShiftName = item.pShiftName;
                }
            });
            return pShiftName;
        },
        async getItems() {
            let _this = this;
            try {
                let res = await _httpClient.get(
                    _httpClient.getApiPrefix() + "/MessageReceived/GetEntity?id=" +
                    _this.Id
                );

                if (res.HttpCode === "200") {
                    //alert(JSON.stringify(res));
                    _this.item = res.Data;
                }
            } catch (e) {
                Toast.fail(JSON.stringify(e));
            }
        },
        showQProblemID(QProblemID) {
            var QProblemName;
            this.columnsQProblem.forEach((item) => {
                if (item.QProblemID === QProblemID) {
                    QProblemName = item.QProblemName;
                }
            });
            return QProblemName;
        },
        showDealType(type) {
            var DealTypeName;
            this.columnsDealType.forEach((item) => {
                if (item.DealTypeID === type) {
                    DealTypeName = item.DealTypeName;
                }
            });
            return DealTypeName;
        },
        changeAgreeValue() {
            this.getTime();
            //如果合格 隐藏页面 直接提交
            // if (this.QCLeaderAgreeValue == "1") {
            //   this.isallow = false;
            //   this.form.QCLeaderAgree = true;
            //   this.valuepDealTypeName = this.showDealType(this.item.AdviceDealType);
            //   this.form.QCLeaderAdviceDealType = this.item.AdviceDealType;
            //   this.form.QCLeaderMemo = this.nowDate + ":" + "品管领班:" + this.user.employeeName + "同意处置意见!"
            // } else {
            //若不同意
            // this.isallow = true;
            // this.form.QCLeaderAgree = false;
            //this.valuepDealTypeName = "";
            //this.form.QCLeaderAdviceDealType = "";
            this.form.QCLeaderMemo =
                this.nowDate + ":" + "用户:" + this.user.employeeName + "已进行异常处置!";
            // }
        },
        //获取缺陷原因
        async getQualityProblems() {
            let _this = this;
            try {
                let res = await _httpClient.get(
                    _httpClient.getApiPrefix() + "/QualityProblems/GetList"
                );

                if (res.HttpCode === "200") {
                    let temp = res.Data.map((item) => ({
                        QProblemID: item.QProblemID,
                        QProblemName: item.QProblemName,
                    }));
                    temp.forEach((item) => {
                        _this.columnsQProblem.push(item);
                    });
                }
            } catch (e) {
                Toast.fail(JSON.stringify(e));
            }
        },
        //获取建议处置方式
        async getDealType() {
            let _this = this;
            //alert(_this.Type);
            try {
                // alert(_httpClient.getApiPrefix() + "/RealtimeEventProcessType/GetList?MsgContentTypeID=" + _this.Type)
                let res = await _httpClient.get(
                    _httpClient.getApiPrefix() + "/RealtimeEventProcessType/GetList?MsgContentTypeID=" + _this.Type
                );
                if (res.HttpCode === "200") {
                    //alert(JSON.stringify(res.Data));
                    let temp = res.Data.map((item) => ({
                        DealTypeID: item.ProcessStatusID,
                        DealTypeName: item.ProcessStatusName,
                    }));
                    temp.forEach((item) => {
                        _this.columnsDealType.push(item);
                    });
                }
            } catch (e) {
                Toast.fail(JSON.stringify(e));
            }
        },
        //获取员工列表
        async getEmployeeID() {
            let _this = this;
            try {
                let res = await _httpClient.get(
                    _httpClient.getApiPrefix() + "/Employee/GetList?PositionID=GW08"
                );
                if (res.HttpCode === "200") {
                    let temp = res.Data.map((item) => ({
                        EmployeeID: item.EmployeeID,
                        EmployeeName: item.EmployeeName,
                    }));
                    temp.forEach((item) => {
                        _this.columnsEmployee.push(item);
                    });
                }
            } catch (e) {
                Toast.fail(JSON.stringify(e));
            }
        },
        async getCheckType() {
            let _this = this;
            try {
                let res = await _httpClient.get(
                    _httpClient.getApiPrefix() + "/QualityCheckType/GetList"
                );
                if (res.HttpCode === "200") {
                    let shiftMap = res.Data.map((item) => ({
                        CheckTypeName: item.CheckTypeName,
                        CheckTypeID: item.CheckTypeID,
                    }));
                    _this.columnsType = shiftMap;
                }
            } catch (e) {
                Toast.fail(JSON.stringify(e));
            }
        },
        onConfirmEmployee(value, index) {
            this.form.EmployeeID = this.columnsEmployee[index].EmployeeID;
            this.EmployeeName = this.columnsEmployee[index].EmployeeName;
            this.showPickerEmployee = false;
        },
        //品管领班审核完成 提交审批
        async submitsure() {
            let _this = this;
            if (_this.valuepDealTypeName == "") {
                alert("请选择处理方式！");
                return;
            }

            _this.item.Readed = true;
            _this.item.ReadDatetime = _this.nowDate;
            _this.item.ProcessStatusID = _this.form.QCLeaderAdviceDealType;
            _this.item.ProcessStatusName = _this.valuepDealTypeName;
            _this.item.ProcessMemo = _this.form.QCLeaderMemo;
            _this.item.Completed = true;
            _this.item.CompleteDatetime = _this.nowDate;


            //alert(JSON.stringify(_this.item));
            Toast.loading({
                mask: true,
                forbidClick: true,
                duration: 0,
                message: "请稍等...",
            });
            try {


                let a = _this.item.ProcessStatusID;

                if ((a == "CA-PT11" || a == "TFC-P3-02" || a == "TFC-P4-02" || a == "TFC-P1-02" || a == "TFC-P2-02" || a == "TFC-P1-02" || a == "MF-P1-03" || a == "MF-P2-03" || a == "MF-P4-01" || a == "MF-P3-03")
                    && (_this.item.MsgContentTypeID == "CA02" || _this.item.MsgContentTypeID == "CA03" || _this.item.MsgContentTypeID == "CA02-2"
                        || _this.item.MsgContentTypeID == "CA03-2" || _this.item.MsgContentTypeID == "MF06" || _this.item.MsgContentTypeID == "TFC08")) {

                    api.openWin({
                        name: "tightenup-abnormalconcessioncreate",
                        url: "./tightenup-abnormalconcessioncreate.html",
                        pageParam: {
                            item: _this.item,
                        },
                        reload: true
                    });
                    setTimeout(function () {
                        _this.$ac.closeWin();
                    }, 1000);
                    return
                }

                //质量异常让步处理
                if ((a == "KP-PT02") && (_this.item.MsgContentTypeID == "ABN11")) {

                    api.openWin({
                        name: "tightenup-abnormalconcessioncreateplus",
                        url: "./tightenup-abnormalconcessioncreateplus.html",
                        pageParam: {
                            item: _this.item,
                        },
                        reload: true
                    });
                    setTimeout(function () {
                        _this.$ac.closeWin();
                    }, 1000);
                    return
                }


                let res = await _httpClient.post(
                    _httpClient.getApiPrefix() + "/MessageReceived/ProcessEventMessage",
                    {
                        body: _this.item,
                    }
                );

                if (res.HttpCode != 200) {
                    //message不为空,有报错信息，打卡失败 暂时这样判断
                    Toast.clear();
                    Toast.fail("操作失败！");
                    alert(res.Message);
                } else {
                    //打卡成功
                    //alert(res.Message);
                    Toast.clear();
                    Toast.success("操作成功！");
                    setTimeout(function () {
                        _this.$ac.closeWin();
                    }, 1000);

                    api.openWin({
                        name: "my-pushMessageM",
                        url: "./my-pushMessageM.html",
                        reload: true
                    });

                }
            } catch (e) {
                Toast.fail(JSON.stringify(e));
            }
        },
    },
};
</script>
  
<style>
.divMessage {
    margin-top: 0px;
    border: solid #dcdcdc;
    margin-left: 5px;
    margin-right: 15px;
    border-top-width: 4px;
    border-left-width: 4px;
    border-right-width: 1px;
    border-bottom-width: 1px;
}

body {
    background-color: white;
}

.table-title-class {
    background-color: #304156;
    color: #fff;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.buttongroup {
    float: right;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.container.dwo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.buttonLeft {
    position: fixed;
    bottom: 8px;
    float: left;
    width: 49%;
}

.formstyle {
    margin-top: 8px;
    font-size: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.radioteam {
    display: flex;
    align-items: center;
    padding-left: 13px;
    margin-top: 10px;
    margin-left: 34px;
    margin-bottom: 10px;
}

.buttonRight {
    position: fixed;
    bottom: 8px;
    float: right;
    left: 51%;
    width: 49%;
    background-color: #f22028;
    border-color: #f22028;
}

.textScroll {
    display: inline-block;
    position: fixed;
    top: 5rem;
    bottom: 0rem;
    overflow: scroll;
    right: 0;
    width: 100%;
    z-index: 1;
}

.message {
    font-size: 15px;
    margin-top: 5px;
    margin-left: -10px;
    font-weight: bold;
}

.mg5 {
    margin-right: 5px;
}

.tag_margin {
    margin: 2px 5px;
}

.card_under {
    height: 100%;
    width: 100%;
    margin: auto;
    background: #ffffff;
    border-radius: 25px;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
}

.card_icon {
    text-align: center;
    /* position: absolute; */
    height: 8rem;
    width: 80%;
    margin: 12% 10%;
    background: rgba(35, 180, 237, 1);
    border-radius: 25px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}

.text {
    font-size: 18px;
    color: #4e4a67;
    margin: 8px auto auto 20px;
    line-height: 1.5rem;
    text-align: justify;
    font-weight: 600;
}

.text_small {
    font-size: 16px;
    color: red;
    margin: 8px auto auto 20px;
    line-height: 1.5rem;
    text-align: justify;
    font-weight: 700;
}

.text_scan {
    font-size: 16px;
    color: #4e4a67;
    margin: auto auto auto 20px;
    line-height: 1.5em;
    text-align: justify;
}

.divStyle {
    margin-left: 3px;
    margin-right: 3px;
}
</style>
  